<html>
	<head>
		<style scoped>
			.content {
				margin: 0 auto;
				width: 60%;
				max-height: 400px;
				overflow: auto;
			}
		</style>
	</head>
	<div>
		<div>
			<button onclick="renderList()">渲染列表</button>
			<button onclick="clearList()">清除列表</button>
		</div>
		<div class="content"></div>
	</div>
	<script>
		let container = document.querySelector('.content')
		function renderList() {
			let itemFragment = document.createDocumentFragment()
			for (let i = 0; i < 1000; i++) {
				let item = document.createElement('p')
				item.innerHTML = `I'm ${i} Element!`
				itemFragment.appendChild(item)
			}

			container.appendChild(itemFragment)
		}
		function clearList() {
			container.remove()
			container = null
		}
	</script>
</html>
